import { IEchartsData } from '@/model/echarts/echartsInter'
import { dataFlag, noSeries, sortObj } from '@/utils/echartsCommonFun'
import {
  EChartsOption,
  PieSeriesOption
} from 'echarts/types/dist/shared'
import { GaugeStateOption } from 'echarts/types/src/chart/gauge/GaugeSeries'

export function Chart (datas:IEchartsData) {
  const series = []
  let sum = 0
  const flag = dataFlag(datas.data)
  let unit = ''
  if (flag > 0 && flag === datas.data.length) { // 没有数据
    series.push(noSeries())
  } else {
    datas.data.forEach(data => {
      let value:Array<{name:string, value:number}> = []
      unit = data.unit ? data.unit : ''
      if (data.value) {
        value = data.value
        value.forEach(item => {
          sum += (item.value ? item.value : 0)
        })
      }
      value = sortObj(value)

      series.push({
        name: data.name ? data.name : '',
        type: 'pie',
        z: 5,
        radius: ['44%', '64%'],
        label: {
          color: '#fff',
          position: 'inside',
          formatter: '{d}' + '%'
        },
        labelLine: {
          show: false
        },
        selectedOffset: 5,
        data: value
      } as PieSeriesOption) // 最里层
    })
    series.push({
      type: 'pie',
      zlevel: 0,
      silent: true,
      radius: ['80%', '81%'],
      color: 'rgba(255,255,255,0.08)',
      // animation:false,
      data: [1],
      labelLine: {
        show: false
      }
    } as PieSeriesOption, // 最外层
    { // 仪表盘
      type: 'gauge',
      z: 0,
      splitNumber: 20,
      startAngle: 90,
      endAngle: -269.9999,
      radius: '87%',
      center: ['50%', '50%'],
      axisLine: {
        show: false
      },
      axisTick: {
        length: 15,
        lineStyle: {
          width: 3,
          color: '#003E7E'
        }
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      pointer: {
        show: false
      },
      detail: {
        show: false
      },
      data: []
    } as GaugeStateOption, // 第二层
    {
      type: 'pie',
      z: 0,
      silent: true,
      radius: ['35%', '36%'],
      color: 'rgba(55,193,249,0.5)',
      // animation:false,
      data: [1],
      labelLine: {
        show: false
      }
    } as PieSeriesOption,
    {
      type: 'pie',
      z: 0,
      silent: true,
      radius: ['29%', '32%'],
      startAngle: '70',
      color: 'rgba(55,193,248,0.3)',
      // animation:false,
      data: [
        { value: 9 },
        {
          value: 15,
          itemStyle: {
            color: 'transparent'
          }
        },
        { value: 9 },
        {
          value: 22,
          itemStyle: {
            color: 'transparent'
          }
        },
        { value: 18 },
        {
          value: 17,
          itemStyle: {
            color: 'transparent'
          }
        }
      ],
      labelLine: {
        show: false
      }
    },
    {
      type: 'pie',
      z: 0,
      silent: true,
      radius: ['36%', '39%'],
      startAngle: '60',
      color: '#37C1F8',
      data: [
        {
          value: 15,
          itemStyle: {
            color: 'transparent'
          }
        },
        { value: 9 },
        {
          value: 17,
          itemStyle: {
            color: 'transparent'
          }
        },
        { value: 9 },
        {
          value: 22,
          itemStyle: {
            color: 'transparent'
          }
        },
        { value: 18 }
      ],
      labelLine: {
        show: false
      }
    })
  }
  return {
    color: ['#0082B3', '#77C14C', '#65B1FF', '#00AEEF', '#003E7E'],
    title: [{
      text: sum.toFixed(2) + unit,
      x: 'center',
      y: 'center',
      textStyle: {
        fontSize: '20',
        fontWeight: 'bold',
        color: '#fff',
        textAlign: 'center'
      }
    }],
    series: series
  } as EChartsOption
}
